import React, { Component } from 'react'
import { Cascader, Space, Button, CheckList, Popup, SearchBar } from 'antd-mobile'

export default class FormChecklist extends Component {
    state = {
        constBrandList: [],
        brandSearchText: '',
        visible:false
    }
    componentDidUpdate(prevProps) {
        if (this.state.constBrandList != prevProps.brandList && this.state.constBrandList?.length <=0 ) {
            this.setState({ constBrandList: prevProps.brandList })
            console.log('=-------',prevProps.brandList,this.state.brandList)
          }
        return true
    }
    render() {
        const {
            brandVisible,
            brandList,
            onChange = () => { },
            items
        } = this.props

        const {
            brandSearchText,
            constBrandList,
        } = this.state
        return (
            <div>
                <Popup
                    visible={brandVisible}
                    onMaskClick={() => {
                        onChange([])
                    }}
                    destroyOnClose
                >
                    <div className='searchBarContainer'>
                        <SearchBar
                            placeholder='输入文字过滤选项'
                            value={brandSearchText}
                            onChange={v => {
                                if (v) {
                                    let arr = this.props.brandList.filter(item => item.label.includes(v))
                                    this.setState({
                                        constBrandList: arr
                                    })
                                } else {
                                    this.setState({
                                        constBrandList: brandList
                                    })
                                }
                                this.setState({ brandSearchText: v })
                            }}
                        />
                    </div>
                    <div className='checkListContainer'>
                        <CheckList
                            className='myCheckList'
                            defaultValue={items ? [items.id] : []}
                            onChange={
                                async (val) => {
                                    console.log(val)
                                    let arr = constBrandList.filter((item) => {
                                        return val.includes(item.id)
                                    })
                                    onChange(arr)
                                }}
                        >
                            {this.state.constBrandList.map((item) => (
                                <CheckList.Item key={item.id} value={item.id}>
                                    {item.label}
                                </CheckList.Item>
                            ))}
                        </CheckList>
                    </div>
                </Popup>
            </div>
        )
    }
}
